"use strict";
define(["commonUI","global"], function (
    commonUI,global
) {
    var editable = false;
    var projectId = null;
    var equipmentId = null;


    var down = false;
    var mainImgBox = $("#main-img");
    var box = {
        x1:null,
        y1:null,
        x2:null,
        y2:null
    }
    var boxSave = {
        x1:null,
        y1:null,
        x2:null,
        y2:null
    }
    var equipments = null;
    var rect = null;

    function drawRect(box){
        // mainImgBox.append(rect);
        rect.setAttribute("style", "z-index: 9999;border: 5px solid red;overflow: hidden;position:absolute;");
        rect.style.left = box.x1 + "px";
        rect.style.top = box.y1 +"px";
        rect.style.width = box.x2-box.x1 + "px";
        rect.style.height = box.y2-box.y1 + "px";
    }

    var app = {
        init: function () {
            projectId = app.getUrlParam("projectId");
            var project = null;
            global.get("/admin/project/"+projectId,function(response){
                project = response.data.project;
            },null,null,false);
            $(".title-text").text(project.name+"设备位置配置");
            $("#main-img").attr("src",global.baseImageUrl + project.image);
            var mainImg = document.getElementById("main-img");
            global.get("/admin/equipment/listAll?projectId="+projectId,function(repsonse){
                equipments = repsonse.data.equipments;
            },null,null,false);
            var $mainImg = $("#main-img");
            mainImg.onload = function() {
                equipments.forEach(element => {
                    $(".eq-list").append('<li equipmentId='+element.id+'><span class="icon"><i class="aidicon aidicon-folder"></i></span>'+element.name+'</li>')
                    var rect = document.createElement("div");
                    rect.setAttribute("style","border:3px solid yellow")
                    rect.style.left = $mainImg.offset().left+(element.x1)*$mainImg.width() + "px";
                    rect.style.top = $mainImg.offset().top + (element.y1)*$mainImg.height() +"px";
                    rect.style.width = (element.x2-element.x1)*$mainImg.width() + "px";
                    rect.style.height = (element.y2-element.y1)*$mainImg.height() + "px";
                    rect.className=rect.className + " rect";
                    rect.style.position="absolute";
                    $(rect).on("mousedown",function(){
                        $("#main-img").trigger("mousedown")
                    })
                    $(rect).on("mousemove",function(){
                        $("#main-img").trigger("mousemove")
                    })
                    $(rect).on("mouseup",function(){
                        $("#main-img").trigger("mouseup")
                    })
                    mainImg.parentNode.appendChild(rect);
                });
            }
            this.eventBind();
        },
        getUrlParam(name) {
            const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
            const result = window.location.search.substr(1).match(reg);
            return result ? decodeURIComponent(result[2]) : null;
          },
        /** 事件绑定 */
        eventBind: function () {
            $(document).on("click", ".eq-list li:not('.active')", function () {
                $(".eq-list").find(".aidicon-folder-open").removeClass("aidicon-folder-open").addClass("aidicon-folder");
                $(this).addClass("active").siblings("li").removeClass("active");
                $(this).find(".aidicon").removeClass("aidicon-folder").addClass("aidicon-folder-open");
                equipmentId = $(this).attr("equipmentId");
                $(".rect").remove();
                global.post("/admin/equipment/listAll?projectId="+projectId,function(repsonse){
                    equipments = repsonse.data.equipments;
                    var $mainImg = $("#main-img");
                    var mainImg = document.getElementById("main-img");
                    equipments.forEach(element => {
                        var rect = document.createElement("div");
                        if(element.id==equipmentId){
                            rect.setAttribute("style","border:5px solid #C40000")
                        }else{
                            rect.setAttribute("style","border:3px solid yellow")
                        }
                        rect.style.left = $mainImg.offset().left+(element.x1)*$mainImg.width() + "px";
                        rect.style.top = $mainImg.offset().top + (element.y1)*$mainImg.height() +"px";
                        rect.style.width = (element.x2-element.x1)*$mainImg.width() + "px";
                        rect.style.height = (element.y2-element.y1)*$mainImg.height() + "px";
                        rect.className=rect.className + " rect";
                        rect.style.position="absolute";
                        $(rect).on("mousedown",function(){
                            $("#main-img").trigger("mousedown")
                        })
                        $(rect).on("mousemove",function(){
                            $("#main-img").trigger("mousemove")
                        })
                        $(rect).on("mouseup",function(){
                            $("#main-img").trigger("mouseup")
                        })
                        mainImg.parentNode.appendChild(rect);
                    });
                });
            })
            $(document).on("click","#editBtn",function(){
                if(equipmentId==null){
                    Dialog.toast("请先选择设备", {"intent":"warn"});
                    return;
                }
                editable = !editable;
                down = false;
                box = {
                    x1:null,
                    y1:null,
                    x2:null,
                    y2:null
                }
                boxSave = {
                    x1:null,
                    y1:null,
                    x2:null,
                    y2:null
                }
                $(".redrect").remove();
                rect = null;
                if(editable==true){
                    $(this).text("取消编辑");
                }else{
                    $(this).text("编辑");
                    
                }
            })
            $(document).on("click", "#saveBtn", function () {
                if(boxSave.x1==null || boxSave.x2==null || boxSave.y1==null || boxSave.y2==null){
                    Dialog.toast("请先选定范围", {"intent":"warn"});
                }else{
                    var data = {}
                    data.x1 = boxSave.x1;
                    data.x2 = boxSave.x2;
                    data.y1 = boxSave.y1;
                    data.y2 = boxSave.y2;
                    data.id = equipmentId;
                    global.post("/admin/equipment/xy/hiddenBox",function(response){
                        if(response.success){
                            Dialog.toast("保存成功", {"intent":"success"});
                            location.reload();
                        }else{
                            Dialog.toast(response.success, {"intent":"warn"});
                        }
                    },JSON.stringify(data))
                }
            })

            $(document).on("mousedown","#main-img",function(){
                if(editable==false){
                    Dialog.toast("请先点击编辑按钮，开启编辑功能", {"intent":"warn"});
                    return;
                }
                if(equipmentId==null){
                    return;
                }
                if(rect!=null){
                    document.getElementById("main-img").parentNode.removeChild(rect);
                    rect = null;
                }
                var e = window.event || e;
                // console.log("down")
                var target = e.target || e.srcElement; //获取document 对象的引用
            
                // box.x1 = e.clientX + $(document).scrollLeft()+mainImgBox.offset().left;
                // box.y1 = e.clientY + $(document).scrollTop()+mainImgBox.offset().top;
                box.x1 = e.clientX + $(document).scrollLeft();
                box.y1 = e.clientY + $(document).scrollTop();
                rect = document.createElement("div");
                rect.className=rect.className + " rect";
                rect.className = rect.className + " redrect";
                $(rect).on("mouseup",function(){
                    $("#main-img").trigger("mouseup")
                })
                document.getElementById("main-img").parentNode.appendChild(rect)
                down = true;
            })
            $(document).on("mousemove","#main-img",function(){
                if(down==true){
                    var e = window.event || e;
                    // console.log("move")
                    var target = e.target || e.srcElement; //获取document 对象的引用
                    // box.x2 = e.clientX + $(document).scrollLeft()+mainImgBox.offset().left;
                    // box.y2 = e.clientY + $(document).scrollTop()+mainImgBox.offset().top;
                    box.x2 = e.clientX + $(document).scrollLeft();
                    box.y2 = e.clientY + $(document).scrollTop();
                    drawRect(box)
                }
            })
            $(document).on("mouseup","#main-img",function(){
                // console.log("up")
                down = false;
                boxSave.x1 = (box.x1-mainImgBox.offset().left)/mainImgBox.width();
                boxSave.y1 = (box.y1-mainImgBox.offset().top)/mainImgBox.height();
                boxSave.x2 = (box.x2-mainImgBox.offset().left)/mainImgBox.width();
                boxSave.y2 = (box.y2-mainImgBox.offset().top)/mainImgBox.height();
                // console.log(box);
                // console.log(boxSave)
            })

            $(".main-wrapper").scroll(function(){
                $(".rect").css("margin-top",-$(this).scrollTop())
            })
            
        }

    };
    return app;
});